<template>
  <van-popover v-model:show="showPopover" class="box-item" theme="dark" placement="top">
    <span class="px-30rpx">{{ data.data.label }}</span>
    <template #reference>
      <view class="flow-node-gateway" @click="handleClickNode">
        <view class="node-header">
          <view class="node-header-icon">
            <i class="iconfont icon-guanlianliucheng" style="color: #ffffff"></i>
          </view>
          <view class="node-name">{{ data.data.label }}</view>
        </view>
      </view>
    </template>
  </van-popover>
  <Handle id="b" class="node" type="source" :position="Position.Top" />
  <Handle id="c" class="node" type="source" :position="Position.Bottom" />
</template>
<script setup>
  import { ref, onMounted } from 'vue';
  import { Handle, Position, useVueFlow } from '@vue-flow/core';

  const emits = defineEmits(['click']);

  const props = defineProps({
    data: {
      type: Object,
      default: () => ({}),
    },
  });

  const { updateNodeData, getConnectedEdges } = useVueFlow();
  const showPopover = ref(false);

  const onSelect = (color) => {
    updateNodeData(props.id, { color, isGradient: false });
    const connectedEdges = getConnectedEdges(props.id);
  };

  const onGradient = () => {
    updateNodeData(props.id, { isGradient: true });
  };

  const handleClickNode = () => {
    emits('click');
  };
</script>
<style scoped>
  .flow-node-gateway {
    width: 100px;
    height: 50px;
    line-height: 50px;
    background-color: #ffffff;
    border: 2px solid #213547;
    border-radius: 10px;
  }

  .node-header {
    /* height: 30px; */
    /* background-color: red; */
    display: flex;
    align-items: center;
    padding-left: 10px;
  }

  .node-icon {
    width: 20px;
    height: 20px;
    border-radius: 5px;
    background-color: #213547;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .node-name {
    font-size: 14px;
    font-weight: 600;
    padding-left: 5px;
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 隐藏超出的内容 */
    text-overflow: ellipsis; /* 用省略号表示被隐藏的部分 */
  }

  .node {
    background-color: #213547;
  }
</style>
